.x-dropdown-list-item {
  @apply flex;
}

.x-dropdown-list-item-link {
  @apply flex w-full items-center py-[7px] pl-2.5 pr-8 text-body-200 text-color-foreground-primary no-underline;

  &.is-aria-selected {
    @apply bg-color-foreground-action text-color-foreground-high-contrast outline-none;

    .flight-icon {
      @apply text-inherit;
    }
  }

  &:not(.is-aria-selected) {
    .check {
      @apply text-color-foreground-action;
    }
  }

  .flight-icon {
    @apply shrink-0;

    .x-dropdown-list-item {
      @apply flex;
    }
  }

  .sort-icon {
    @apply mx-3;
  }
}

.checkable-item {
  @apply grid;
  grid-template-columns: 16px auto;
  grid-template-areas: "check label";

  &.checkmark-position--trailing {
    grid-template-columns: auto 16px;
    grid-template-areas: "label check";
  }

  &.has-count {
    grid-template-columns: 16px auto 60px;
    grid-template-areas: "check label count";

    &.checkmark-position--trailing {
      grid-template-areas: "label count check";
      grid-template-columns: auto 60px 16px;
    }
  }

  .checkable-item-content {
    grid-area: label;
  }

  .checkable-item-count {
    grid-area: count;
  }

  .check {
    grid-area: check;
  }
}
